<template>
  <div class="inboxmsg-tabs-content">
    <el-tabs
      class="tabs-group"
      v-model="activeTabs"
      @tab-click="handleClickTabs"
    >
      <el-tab-pane
        :label="item.name"
        :name="i.toString()"
        v-for="(item, i) in typeList"
        :key="i"
      ></el-tab-pane>
    </el-tabs>
    <div class="notifications-tabs">
      <div
        class="notifications-nav-wrap"
        :style="{ width: notificationsTypeWidth + 'px' }"
      >
        <div
          class="news-item"
          :class="Number(activeTabs) == i ? 'active' : ''"
          v-for="(item, i) in typeList"
          :key="i"
          @click="handleClickTabs({ item, i })"
        >
          {{ item.name }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
const typeList = [
  {
    name: "全部",
  },
  {
    name: "系统通知",
  },
  {
    name: "实习招聘",
  },
  {
    name: "实践项目",
  },
  {
    name: "留言板",
  },
];
export default {
  name: "InboxTabs",
  props: {
    typeList: {
      type: Array,
      default: () => {
        return [];
      },
    },
    activeName: {
      type: String,
      default: "0",
    },
  },
  // 局部注册的组件
  components: {},
  // 组件状态值
  data() {
    return {
      activeTabs: this.activeName,
    };
  },
  // 组件方法
  methods: {
    handleClickTabs(navItem) {
      let clientW = document.body.clientWidth;
      if (clientW < 768 && navItem) this.activeTabs = JSON.stringify(navItem.i);
      this.$emit("changeActivePannel", {
        activeName: this.activeTabs,
        item: this.typeList[this.activeTabs],
      });
    },
  },
  /**
   * el 被新创建的 vm.$ el 替换，并挂载到实例上去之后调用该钩子。
   * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$ el 也在文档内。
   */
  mounted() {},
  computed: {
    // 计算tabbar选项卡的宽度
    notificationsTypeWidth: function () {
      return this.typeList.length * 86;
    },
  },
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped></style>
<style lang="less">
// el-tabs__item is-top is-active
.inboxmsg-tabs-content {
  max-width: 920px;

  .tabs-group {
    .el-tabs__header {
      margin: 0;
    }

    .el-tabs__item {
      margin-right: 20px;
      border-radius: 30px;
      font-size: 16px;
      background: rgba(61, 108, 176, 0.1);
      font-size: 16px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #3d6cb0;
    }
    .el-tabs__item.is-bottom:nth-child(2),
    .el-tabs__item.is-top:nth-child(2),
    .el-tabs__item.is-bottom:nth-child(2),
    .el-tabs__item.is-top:nth-child(2) {
      padding-left: 20px !important;
    }
    .el-tabs__item.is-bottom:last-child,
    .el-tabs__item.is-top:last-child,
    .el-tabs__item.is-bottom:last-child,
    .el-tabs__item.is-top:last-child {
      padding-right: 20px !important;
    }
    .el-tabs__item.is-active {
      background: #3d6cb0;
      color: white;
    }

    .el-tabs__active-bar {
      display: none;
    }

    .el-tabs__nav-wrap::after {
      display: none;
    }
  }
}
@media (min-width: 769px) {
  .notifications-tabs {
    display: none;
  }
}
@media (max-width: 768px) {
  .tabs-group {
    display: none;
  }
  .notifications-tabs {
    width: 100%;
    overflow: scroll;
    position: fixed;
    top: 0.54rem;
    left: 0;
    background-color: #ffffff;
    z-index: 999;
    .notifications-nav-wrap {
      display: flex;
      padding: 0.12rem 0 0.12rem 0.1rem;
      .news-item {
        width: 0.76rem;
        height: 0.31rem;
        text-align: center;
        font-size: 0.13rem;
        line-height: 0.31rem;
        border-radius: 0.16rem;
        color: #3d6cb0;
        background-color: rgba(61, 108, 176, 0.1);
        margin-right: 0.1rem;
      }
      .active {
        color: #ffffff;
        background-color: #3d6cb0;
      }
    }
  }
  ::-webkit-scrollbar {
    display: none;
  } 
}
</style>
